<template>
  <div style="flex: 1 1 0%; overflow: hidden auto;height:calc(100vh - 80px)" class="mt10">
    <a-menu v-model:selectedKeys="selectedKeys"
            theme="light"
            mode="inline"
            v-model:open-keys="openKeys"
            @click="handleMenuClick"
    >
      <template v-for="menu in menuList" :key="menu.id">
        <a-sub-menu :key="menu.path" v-if="menu.children && menu.children.length > 0">
          <template #title>
                <span>
                  <component :is="menu.icon"></component>
                  <span>{{menu.title}}</span>
                </span>
          </template>
          <a-menu-item :key="cmenu.path" v-for="cmenu in menu.children">
            <span class="mr5"><component :is="cmenu.icon" /></span>
            <span><nuxt-link :to="cmenu.path">{{cmenu.title}}</nuxt-link></span>
          </a-menu-item>
        </a-sub-menu>
        <a-menu-item :key="menu.path" v-else>
          <nuxt-link :to="menu.path">
            <component :is="menu.icon"></component>
            <span>{{menu.title}}</span></nuxt-link>
        </a-menu-item>
      </template>
    </a-menu>
  </div>
</template>
<script setup>

import { createFromIconfontCN } from '@ant-design/icons-vue';

const route = useRoute()

const openKeys = ref([route.fullPath])
const selectedKeys = ref([route.fullPath])
const userStore = useStore.userState()
const menuList = computed(()=>userStore.menus)

const handleSelectKeyPath = (item)=>{
  var keyPath = []
  const callback = function(citem){
    citem.forEach(obj=>{
      if(obj.path == route.fullPath){
        keyPath.push(obj.path)
      }
      if(obj.children && obj.children.length > 0){
        obj.children.forEach(obj2=>{
          if(obj2.path == route.fullPath){
            keyPath.push(obj.path)
            keyPath.push(obj2.path)
          }
        })
      }
    })
  }
  callback(item)
  openKeys.value = keyPath
}

const handleMenuClick = (item)=>{
  openKeys.value = item.keyPath
}

onMounted(()=>{
  handleSelectKeyPath(menuList.value)
})
</script>